<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sunshiny Shower</title>
    <meta name="description" content="A Processing Project for UCAS's Data Structure Course 2021">
    <meta name="keywords" content="p5.js, animation, processing">
    <meta http-equiv="author" content="小数据大结构">
    <meta http-equiv="pragma" content="no-cache">
    <link rel="stylesheet" href="sunshinyshower.css">
    <script src="resource/p5.min.js"></script>
    <script src="queue.js"></script>
  </head>
  <body>
    <section id="canvas"></section>
    <section id="ambient"></section>
    <section id="gadgets">
      <div class="infors"><div><span style="font-size: medium;">UCAS数据结构课程期末作业</span></div></div>
      <div id="controls">
        <div class="slider_container">
          <form class="slider_form" id="rainfallTag" oninput="rain.value = Number(Rainfall.value).toFixed(2)">
            <span class="slider_tag">降水</span>
            <input type="range" class="slider" name="Rainfall" id="rainfall" min="0.00" max="1.00" step="0.01" value="0.40">
            <output class="slider_output" for="Rainfall" form="rainfallTag" name="rain">0.40</output>
          </form>
        </div>
        <div class="slider_container">
          <form class="slider_form" id="windDirTag" oninput="wdDr.value = Number(WindDir.value).toFixed(2)">
            <span class="slider_tag">风向</span>
            <input type="range" class="slider" name="WindDir" id="windDir" min="0.00" max="6.28" step="0.01" value="0.24">
            <output class="slider_output" for="WindDir" form="windDirTag" name="wdDr">0.24</output>
          </form>
        </div>
        <div class="slider_container">
          <form class="slider_form" id="windStrTag" oninput="wdSt.value = Number(WindStr.value).toFixed(2)">
            <span class="slider_tag">风速</span>
            <input type="range" class="slider" name="WindStr" id="windStr" min="0.00" max="9.99" step="0.01" value="6.60">
            <output class="slider_output" for="WindStr" form="windStrTag" name="wdSt">6.60</output>
          </form>
        </div>
        <div class="slider_container">
          <form class="slider_form" id="cameraVwTag" oninput="caVw.value = Number(CameraVw.value).toFixed(2)">
            <span class="slider_tag">视角</span>
            <input type="range" class="slider" name="CameraVw" id="cameraVw" min="0.00" max="6.28" step="0.01" value="0.34">
            <output class="slider_output" for="CameraVw" form="cameraVwTag" name="caVw">0.34</output>
          </form>
        </div>
      </div>
      <div class="infors">
        <div><span>池塘夜降彩色雨 ©小数据大结构,2021</span></div>
        <div><span>@赵元浩 @霍育福 @李文毅</span></div>
      </div>
    </section>
    <audio src="resource/Rain_Effects.mp3" id="rain_sound" loop></audio>
    <audio src="resource/Thunder_Effects.mp3" id="thunder"></audio>
  </body>
  <script src="sunshinyshower.js"></script>
</html>
